<template>
  <div>
    
<van-cell is-link @click="showPopup">配送至：请选择配送范围</van-cell>

<van-popup v-model="show"
 position="bottom"
  :style="{ height: '70%' }"
>
<!-- 头部 -->
<div class="picker-title"> 
<div>请选择配送区域</div>
<div>未显示地区即超出配送范围，无法进行选择</div>
</div>
<van-tabs v-model="active">
  <van-tab title="省份">
<van-index-bar :index-list="[]">
  <van-cell title="北京" />
  <van-cell title="广东" />
  <van-cell title="湖南" />
  </van-index-bar>
  </van-tab>
  <van-tab title="城市">
<van-index-bar :index-list="[]">
  <van-cell title="中关切" />
  <van-cell title="深圳" />
  <van-cell title="湘潭" />
  </van-index-bar>
  </van-tab>
  <van-tab title="区县">
    <van-index-bar :index-list="[]">
  <van-cell title="龙岗" />
  <van-cell title="罗湖" />
 
  </van-index-bar>
  </van-tab>
  
</van-tabs>
</van-popup>    
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      active:""
    }
  },

  methods: {
    showPopup() {
      this.show = true;
    }
  }
};
</script>
<style lang="less" scoped>
.van-popup{
 background: #ededed;
}
  .picker-title{        
    background-color: #fff;
    top: -110px;
    height: 45px;  
    padding: 10px 15px 0;   
  }
  div:first-child {
    margin-bottom: 4px;
    box-shadow: 0 0 black;


        font-size: 13px;
    color: #797d82;
  }
  div:last-child {
 
   font-size: 11px;
    // color: #c03131;
      color: #797d82;
  }
  //上拉详情
  .van-tabs__wrap{
    box-sizing: content-box;
    height: 100%;
    padding-bottom: 15px;
 
}
</style>
